<style lang="scss" scoped>
.home {
  background-color: #fff;
  width: 100vw;
  .user_head_photo img {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    border-radius: 50%;
  }
  .van-nav-bar__content {
    i {
      font-size: 24px;
    }
  }
  .van-tabs__line {
    z-index: 2;
  }
  .van-tabs__content {
    position: relative;
    z-index: 1;
    margin-top: -3px;
    border-top: 1px solid var(--hui);
  }
  .banner {
    .content {
      text-align: center;
      font-size: 12px;
      padding: 10px;
    }
    .msg_banner {
      text-align: center;
      font-size: 12px;
      .van-row {
        .van-col {
          p:nth-child(1) {
            margin: 10px 0;
          }
        }
      }
      .specification {
        padding: 20px 20px 0;
        .top {
          .title {
            font-weight: 600;
            font-size: 14px;
          }
          .btn {
            button {
              background-color: transparent;
              border: none;
              color: rgb(223, 113, 50);
            }
          }
        }
        .options {
          margin: 20px 0 0;
          .van-radio-group {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            .van-radio {
              padding-bottom: 10px;
            }
          }
        }
      }
    }
  }
  .map > div {
    border: 1px solid var(--hui);
    margin: 20px 10px;
    border-radius: 4px;
    overflow: hidden;
  }
  .map > .point .ico {
    color: #ff5a00;
  }
  .map > .origin .ico {
    color: #0068fe;
  }
  .bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    .btn {
      width: 100%;
      text-align: center;
      background-color: red;
      line-height: 50px;
      .left {
        width: 50%;
        background-color: #ff5c03;
        color: #fff;
      }
      .right {
        width: 50%;
        background-color: #e9b903;
        color: #ff1f03;
      }
    }
  }
  .wrap_box {
    .user_info {
      padding: 20px 0;
      height: 120px;
      // background-color: red;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
  }
}
</style>
<template>
  <div class="home fixed">
    <!-- 头部 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar>
          <template #left>
            <!-- <van-icon name="user-o" @click="onLeft" /> -->
            <!-- <van-icon name="user-circle-o" color="#000000" @click="onLeft" /> -->
            <van-icon
              class="user_head_photo"
              :name="$baseURL + $store.state.userInfo.head_photo"
              color="#000000"
              @click="onLeft"
            />
          </template>
          <template #title>
            <span>趣拉拉</span>
          </template>
          <template #right>
            <i @click="onRight" class="iconfont icon-xiaoxi"></i>
          </template>
        </van-nav-bar>
      </van-sticky>
    </div>
    <!-- 导航轮播 -->
    <div class="banner">
      <van-tabs v-model="active" swipeable animated @change="getBannerIndex">
        <van-tab v-for="(item, index) in list" :key="index" :title="item.tit">
          <div class="content">
            <van-image
              width="100%"
              height="30vh"
              :src="$baseURL + item.img"
              :alt="$baseURL + item.tit"
            />
          </div>
        </van-tab>
      </van-tabs>
      <div class="msg_banner" v-for="(item, index) in list" :key="index">
        <template v-if="banner_index == index">
          <van-row v-if="list[index].weight" type="flex" justify="space-around">
            <van-col span="6">
              <p>{{ item.weight ? item.weight : "" }}</p>
              <p>载重</p>
            </van-col>
            <van-col span="6">
              <p>{{ item.area ? item.area : "" }}</p>
              <p>长*宽*高</p>
            </van-col>
            <van-col span="6">
              <p>{{ item.volume ? item.volume : "" }}</p>
              <p>载货体积</p>
            </van-col>
          </van-row>
          <!-- 特殊规格 -->
          <div v-if="item.special_spe" class="specification">
            <div class="top flex">
              <div class="title">特殊规格</div>
              <div class="btn">
                <button
                  v-if="flg"
                  class="hide"
                  @click="clickShow('hide')"
                >
                  收起
                </button>
                <button v-else class="show" @click="clickShow('show')">
                  展开
                </button>
              </div>
            </div>
            <div v-show="flg" class="options">
              <van-radio-group v-model="options" direction="horizontal">
                <van-radio
                  v-for="(ite, val) in item.special_spe"
                  :key="val"
                  :name="ite"
                  >{{ ite }}</van-radio
                >
              </van-radio-group>
            </div>
          </div>
        </template>
      </div>
    </div>
    <!-- 编辑起点和终点 -->
    <div class="map">
      <div class="origin">
        <van-cell
          :title="$store.state.startData"
          icon="location-o"
          @click="gotoMap('start')"
          center
        >
          <template #right-icon>
            <van-icon class="b" name="aim" />
          </template>
          <template #icon>
            <van-icon size="22px" class="ico" name="location" />
          </template>
        </van-cell>
      </div>
      <div class="point">
        <van-cell
          :title="$store.state.endData"
          icon="location-o"
          @click="gotoMap('end')"
          center
        >
          <template #right-icon>
            <van-icon class="b" name="aim" />
          </template>
          <template #icon>
            <van-icon size="22px" class="ico" name="location" />
          </template>
        </van-cell>
      </div>
    </div>
    <div class="bottom">
      <ProceBox></ProceBox>
      <div class="btn flex">
        <div class="left">
          <a class="fff" href="/#/order">即时用车（10分内）</a>
        </div>
        <div class="right">
          <i class="iconfont icon-damailogo"></i> 在线预约
        </div>
      </div>
    </div>
    <van-popup
      v-model="showLeft"
      position="left"
      :style="{ height: '100%', width: '70%' }"
    >
      <div class="wrap_box">
        <div class="user_info">
          <van-image
            round
            width="80px"
            height="80px"
            :src="$baseURL + $store.state.userInfo.head_photo"
            @click="$router.push('/per')"
          />
          <p>{{ $store.getters.filterPhone }}</p>
          <!-- <p style="color:#999;">请先登录</p> -->
        </div>
        <div class="menu_list">
          <van-cell
            size="large"
            title="订单记录"
            icon="todo-list-o"
            is-link
            to="indent"
          />
          <van-cell size="large" title="我的司机" icon="logistics" is-link />
          <van-cell size="large" title="趣拉券" icon="coupon-o" is-link />
          <van-cell size="large" title="消息通知" icon="envelop-o" is-link />
          <van-cell size="large" title="常见问题" icon="question-o" is-link />
          <van-cell size="large" title="邀请朋友" icon="share-o" is-link />
          <van-cell size="large" title="功能设置" icon="setting-o" is-link />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getCarList } from "../api/getCarList";
import ProceBox from "../components/PriceBox";
export default {
  components: { ProceBox },
  name: "Home",
  data: () => ({
    banner_index: 0,
    showLeft: false,
    flg:true,
    active: 0,
    point: "",
    options: "",
    list: [],
    btn_option: "",
  }),
  watch: {
    banner_index() {
      this.options = "";
    },
  },
  methods: {
    gotoMap(txt) {
      this.$router.push({
        name: "Map",
        query: {
          txt,
        },
      });
    },
    getBannerIndex(name) {
      this.banner_index = name;
    },
    clickShow(text) {
      if (text == "show") {
        this.flg = true;
      } else if (text == "hide") {
        this.flg = false;
      }
    },
    onclick(e) {
      if (e.target.nodeName.toLowerCase() == "button") {
        this.btn_option = e.target.querySelector("span").innerHTML;
      }
    },
    onLeft() {
      this.showLeft = true;
    },
    onRight() {
      this.$router.push("/board");
    },
  },
  created() {
    getCarList().then((res) => {
      this.list = res.data.data;
    });
  },
};
</script>
